<template>
 <div class="page-home" >
     <!-- 二级路由渲染 -->
     <div class="main" ref="homeEle">
      <router-view></router-view>
     </div>
     <!-- 底部导航bottomBar -->
     <ul class="navBar">
       <router-link tag="li" to="/films">
          <i class="fa fa-video-camera"></i>
          <br />电影
       </router-link>
       <router-link tag="li" to=/cinemas>
          <i class="fa fa-film"></i>
          <br />影院
       </router-link>
       <router-link tag="li" to="/informations">
          <i class="fa fa-question-circle"></i>
          <br />资讯
       </router-link>
       <router-link tag="li" to="/center">
          <i class="fa fa-user"></i>
          <br />我的
       </router-link>
     </ul>
 </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
    }
  },
  provide () {
    return {
      home: this
    }
  }
}
</script>

<style scoped lang="scss">
  .page-home{
    height:100%;
    display: flex;
    flex-direction: column;
    .main{
      flex: 1;
      overflow-y: auto;
    }
    .navBar{
      height: 50px;
      text-align: center;
      display: flex;
      li{
        flex: 1;
        i{
          display: block;
        }
      }
    }
  }
  .router-link-active{
    color:#ff5f16;
  }
</style>
